<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$live_room['title']}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" type="text/css" href="/Public/css/common/animate.css">
    <link rel="stylesheet" type="text/css" href="/Public/css/common/base.css">
    <link rel="stylesheet" type="text/css" href="/Public/css/live/loading.css">
    <link rel="stylesheet/less" type="text/css" href="/Public/css/live/index.less">
    <style type="text/css">
        body{ background-color: black; }
        .qrcode{display:none;z-index:10;position:fixed;top:150px;left:50%;margin-left:-100px}
        .close-ad{position:absolute;padding:0 4px;right:0px;bottom:200px;height:24px;line-height:24px;border-radius:4px;background-color:#242221;color:white;font-size:12px}
        .ad-image{position: absolute;right: 30px;bottom: 120px;}
        .qrcode-p{font-size: 1.4rem;text-align: center;color: white}
    </style>
</head>
<body>
<div>
    <div>
        <video id="myvideo"
               class="video"
               webkit-playsinline="true"
               x-webkit-airplay="true"
               playsinline="pxtrue"
               x5-video-player-type="h5"
               x5-video-player-fullscreen="false"
               preload="auto"  poster="{$live_room['poster']}"
               src="http://183.136.188.90:7936/live{$live_room['id']}.m3u8"
               style="
                width: 100%;
                height: 100%;
                object-fit: fill; position: relative;background-color: black; ">
        </video>
        <input type="hidden" id="userNum" value="">
        <input type="hidden" id="nickname" value="{$nickname}">
        <input type="hidden" id="openid" value="{$openid}">
        <input type="hidden" id="subscribe" value="{$subscribe}">
        <input type="hidden" id="roomId" value="{$live_room['id']}">
        <div class="interaction">

            <div class="button play h-center"></div>


            <div class="button dianzan" id="btn-praise"></div>
            <if condition="$live_room.support_upload eq 1">
                <button class="button-upload"><input type="file" id="upload-img" style="opacity: 0;width:20px;height:20px" value="" accept="image/gif, image/jpeg"></button>
            </if>
            <div class="layout-item-ab for-send">
                <div class="text-input item-a w-5">
                    <div class="<if condition='$live_room.support_upload eq 1'>msg-wrapper-upload<else/>msg-wrapper</if> v-center h-center">
                        <input class="msg-input" type="text" id="input" placeholder="说点什么...">
                    </div>
                </div>
                <div class="tips item-b w-5">
                    <div class="button <if condition='$live_room.support_upload eq 1'>send-upload<else/>send</if>" id="sub"></div>
                </div>
            </div>
            <div class="msg-window" id="message">

            </div>
        </div>

        <div class="anim-container"></div>
        <if condition="$live_room.ad_link neq null">
            <div class="ad">
                <span class="close-ad">广告 <span class="second">5</span> 秒</span>
                <a href="{$live_room['ad_link']}">
                    <img class="ad-image" src="{$live_room['ad_image']}" width="80" height="80">
                </a>
            </div>
        </if>
    </div>
</div>
<div class="qrcode">
    <div class="show-qrcode">
        <img src="{$qrcode}" width="200px" height="200px">
        <p class="qrcode-p">长按识别二维码</p>
        <p class="qrcode-p">关注后继续观看</p>
    </div>
</div>
<div class="spinner" style="display:none">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>
<script src="/Public/js/jquery-3.1.1.min.js"></script>
<script src="/Public/js/common/less.js"></script>
<script src="/Public/js/common/common.js"></script>
<script src="/Public/js/live/websocket.js"></script>
<script src="/Public/js/common/baidutongji.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: '{$shareData["appId"]}',
        timestamp: '{$shareData["timestamp"]}',
        nonceStr: '{$shareData["nonceStr"]}',
        signature: '{$shareData["wxSha1"]}',
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
    });
    wx.error(function(res){
        console.log(res);
    });
    wx.ready( function( e ){
        wx.onMenuShareAppMessage({
            title: "{$live_room['share_title']}",
            desc: "{$live_room['share_desc']}",
            link: "{$live_room['share_link']}",
            imgUrl: "{$live_room['share_image']}",
            type: 'link',
            dataUrl: '',
            success: function () {},
            cancel: function () {}
        });
        wx.onMenuShareTimeline({
            title: "{$live_room['share_title']}",
            link: "{$live_room['share_link']}",
            imgUrl: "{$live_room['share_image']}",
            success: function () {},
            cancel: function () {}
        });
    })
</script>
<script type="text/javascript">
    $(function() {
        var isVertical = true;
        window.onorientationchange = function () {
            isVertical = !(Math.abs(window.orientation) == 90 );
            if (!isVertical) {
                $(".video").css({
                    height: window.innerHeight / 2 + 20 + "px"
                });
                $(".msg-window").css({
                    height: "160px"
                });
                //console.log("横屏");
            } else {
                $(".video").css({
                    height: "100%"
                });
                $(".msg-window").css({
                    height: "300px"
                });
                //console.log("竖屏");
            }
            //横竖屏切换时， 有过渡时间， 500ms 的延迟可避免。
            setTimeout(updateState, 500);
        };
        var $playBtn = $(".button.play");
        var $video = $("#myvideo");

        //$playBtn.hide();
        $video.on("canplay", function () {
            $playBtn.show();
        });
        var updateState = function () {
            if (isPlay) {
                $playBtn.addClass('pause');
            } else {
                $playBtn.removeClass('pause');
            }
            if (isVertical) {
                $playBtn.css('bottom', "auto");
                $playBtn.css('top', $video.height() - 60);
                console.log($video.css("height"));
            } else {
                $playBtn.css('top', "auto");
                $playBtn.css('bottom', "6rem");
            }
        };
        var stopFunc = function () {
            isPlay = false;
            updateState();
        };
        var startFunc = function () {
            isPlay = true;
            updateState();
            if (isFirst) {
                isFirst = false;
                $playBtn.removeClass("h-center");
            }
        };
        $video.on("ended", stopFunc);
        $video.on("pause", stopFunc);
        $video.on("play", startFunc);

        var isPlay = false, isFirst = true;
        $playBtn.tap(function () {
            var video = $video[0];
            if (!isPlay) {
                video.play();
            } else {
                video.pause();
            }
        })

        var support_qrcode = '<?php echo $live_room["support_qrcode"]?>';
        if(support_qrcode == 1){
            var iQrcode = setInterval(show, 1000 * 10);
        }
        function show(){
            var subscribe = $("#subscribe").val();
            if(subscribe!=1){
                $(".qrcode").show();
                $("#myvideo").attr("src","");
            }else{
                clearInterval(iQrcode);
            }
        }
        timer(4);
        function timer(intDiff){
            window.setInterval(function(){
                var second=0;
                if(intDiff >= 0){
                    second = Math.floor(intDiff);
                }else{
                    $('.ad').hide();
                    return;
                }
                $('.second').html(second);
                intDiff--;
            }, 1000);
        }
    })
</script>
</body>
</html>